<html>
<script>
function proximo(){
	printMsg(document.appletTab.proximo());
	construirLegenda();
	mostra('proximoPasso',false);
}

function valida(){	
	if(document.appletTab.hasProbabilidade()){
		var j=0;
		var fim = false;
		var resposta="";
		while(!fim){
			try{
				resposta=document.getElementById("num_"+j).value+"/"+document.getElementById("den_"+j).value;
				
				document.appletTab.respondeProbabilidade(document.getElementById("num_"+j).value,document.getElementById("den_"+j).value,j);
				j++;
			}catch(err){
				fim=true;
			}
		}
	}
	if(document.appletTab.hasMontaOperacao()){
		var selectA = document.getElementById('conjsA');
		var selectB = document.getElementById('conjsB');
		var selectOp = document.getElementById('operacoes');
		var expressao = selectA.options[selectA.selectedIndex].text+selectOp.options[selectOp.selectedIndex].value+selectB.options[selectB.selectedIndex].text;
		document.appletTab.respondeExpressao(expressao,0);
		
	}

	var qntErros = document.appletTab.validarMarcacao();
	if(qntErros>0){
		var s="";
		if(qntErros>1)s="s";
		printMsg(qntErros+' erro'+s+' encontrado'+s+'!Tente corrigir');
	}else{
		if(!document.appletTab.isCompleto()){
			if(document.appletTab.isMostrandoErros())
				printMsg('Veja onde está o erro e tente corrigir!');
			else
				printMsg('Nenhum erro, mas a solução está incompleta.');
		}else{
				printMsg('Parabens, passe para o proximo desafio!');
				mostra('proximoPasso',true);
		}
	}

}
function limpar(){
	document.appletTab.limpar();
	printMsg('Limpou Tabuleiro!');
}

function novo(){
	document.appletTab.novoJogo();
	printMsg('Criou novo Tabuleiro!');
}

function printMsg(msg){
	var newP = document.createElement('span');
	newP.id = 'msg';
	var txt = msg;
	var newT = document.createTextNode(txt);
	newP.appendChild(newT);
	var p2 = document.getElementById('msg');
	p2.parentNode.replaceChild(newP,p2);
}

function printMsgIn(msg,id){		
	var txt = msg;
	var newT = document.createTextNode(txt);
	var p2 = document.getElementById(id);
	p2.replaceChild(newT,p2.firstChild);
}

function addElementIn(elem,id){			
	var p2 = document.getElementById(id);
	p2.replaceChild(elem,p2.firstChild);
}


function limpaSelect(select){
	var elSel = document.getElementById(select);
	var i;
	for (i = elSel.length - 1; i>=0; i--) {
	 
	    elSel.remove(i);   
	}
}

function construirLegenda(){
	limpaSelect('conjsA');
	limpaSelect('conjsB');
	
	printMsgIn(document.appletTab.desafioMensagem(),'desafioMensagem');

	var table = document.createElement("table");
	var legenda = document.getElementById('legenda');
	
	var conjunto="T",descricao="TESTE",fim=false,i=0,j=0,numConj=0;
	var tmp="";
	var opcaoA,opcaoB;
	while(!fim){
		//alert(i);
		try{			
			descricao = document.appletTab.legendaDescricao(parseInt(i));
			conjunto = document.appletTab.conjuntoNome(parseInt(i));
			if(conjunto!="eof" && descricao!="eof"){
				table.appendChild(criaLinhaLengenda(conjunto,descricao));
				
				opcaoA = document.createElement("option");
				opcaoA.text = conjunto;
				opcaoA.value = i;
				
				opcaoB = document.createElement("option");
				opcaoB.text = conjunto;
				opcaoB.value = i;
				
				try {
					document.getElementById('conjsA').add(opcaoA, null); // standards compliant; doesn't work in IE
					document.getElementById('conjsB').add(opcaoB, null);
					numConj++;
				}catch(ex) {
				    document.getElementById('conjsA').add(opcaoA); // IE only
				    document.getElementById('conjsB').add(opcaoB);
				}					
				if(document.appletTab.hasProbabilidade()){									
					j=0;
					limpaProbabilidades();
					var tab = document.getElementById("tabProbabilidade");
					while(document.appletTab.getExpressaoProbabilidade(j)!="eof"){
						tab.appendChild(criaLinhaProbabilidade(document.appletTab.getExpressaoProbabilidade(j),j));						
						j++;				
					}
				
				}
				
									
			}else
				fim=true;
		}catch(err){
			alert("Erro: "+err.getCause());
		}
		i++;
	}
	legenda.replaceChild(table,legenda.firstChild);
	
	fim=false;
	i=0;
	while(!fim){		
		try{
			descricao = document.appletTab.getOperacaoDescricao(parseInt(i));			
			conjunto = document.appletTab.conjuntoNomeOperacao(parseInt(i));
			if(conjunto!="eof" && descricao!="eof"){
				printMsgIn(conjunto,'conjOperacao');
				if(document.appletTab.isExpressao(parseInt(i)))
					addElementIn(parseExpressao2Image(descricao),'descOperacao');
				else					
					printMsgIn(descricao,'descOperacao');
				printMsgIn(conjunto,'conjOperacaoProb');
			}else
				fim=true;
		}catch(err){
			alert("Erro: "+err.getCause());
		}
		i++;
	}
	
	var temProbabilidade = document.appletTab.hasProbabilidade();
	var temMontaOperacao = document.appletTab.hasMontaOperacao();
	var temEvento = document.appletTab.hasEvento();
	//alert(temEvento);
	montaAtividade(true,temEvento,temMontaOperacao,temProbabilidade);
	mostra('proximoPasso',false);
	
	
}

function criaLinhaLengenda(conjunto,descricao){
	var tr = document.createElement("tr");
	var tdConj = document.createElement("td");
	var tdDesc = document.createElement("td");
	tdConj.appendChild(document.createTextNode(conjunto));
	tdDesc.appendChild(document.createTextNode(descricao));
	tr.appendChild(tdConj);
	tr.appendChild(tdDesc);
	return tr;
	
}

function limpaProbabilidades(){
	var tabela = document.getElementById('tabProbabilidade');
	var pai = tabela.parentNode;
	tabela.parentNode.removeChild(tabela);
	tabela = document.createElement('table');
	tabela.id='tabProbabilidade';
	pai.appendChild(tabela);
}

function criaLinhaProbabilidade(expressao,id){
	var tr = document.createElement("tr");
	var tdExp = document.createElement("td");
	var tdResp = document.createElement("td");
	if(expressao=='A' || expressao=='|A'){
		expressao="P("+expressao+")";
		tdExp.appendChild(parseExpressao2Image(expressao));
		tdExp.appendChild(document.createTextNode("="));
	}else{
		tdExp.appendChild(document.createTextNode("P("));
		tdExp.appendChild(parseExpressao2Image(expressao));
		tdExp.appendChild(document.createTextNode(") ="));
	}
	
	var numerador = document.createElement("input");
	var denominador = document.createElement("input");
	numerador.id="num_"+id;
	numerador.size="2";
	denominador.id="den_"+id;
	denominador.size="2";
	
	tdResp.appendChild(numerador);
	tdResp.appendChild(document.createTextNode("/"));
	tdResp.appendChild(denominador);
	tr.appendChild(tdExp);
	tr.appendChild(tdResp);
	return tr;
	
}

function montaAtividade(temLegenda,temEvento,temMontaOperacao,temProbabilidade){	
	//alert(temLegenda+" "+temEvento+" "+temMontaOperacao+" "+temProbabilidade);
	mostra("legenda",temLegenda);
	mostra("evento",temEvento);
	mostra("probabilidade",temProbabilidade);
	mostra("montaOperacao",temMontaOperacao);
}

function mostra(id,mostrar){
	if(mostrar){		
		document.getElementById(id).style.position='relative';	
		document.getElementById(id).style.visibility='visible';
	}else{
		document.getElementById(id).style.visibility='hidden';
		document.getElementById(id).style.position='absolute';
	}
}

function probabilidade(conjunto){
	
}

function done(){
	construirLegenda();
	//var tab = document.getElementById("tabProbabilidade");
	//tab.appendChild(criaLinhaProbabilidade('A^B',0));
	//mostra("probabilidade",true);
}

function fim(){
	alert('acabou');
}

function parseExpressao2Image(evento){
	var span=document.createElement('span');
	var img = document.createElement('img');
	img.src="br/uff/probabilidade/imagens/expressoes/"+evento+".gif";
	img.style.paddingTop='0';
	span.appendChild(img);
	return span;
}

var nivelAtual = 1;
</script>
<body style="font-family: cursive">

<table style="color: black;">
	<tr>
		<td colspan="1" style="font-size: 11pt;text-align: justify;padding-bottom: 10px;"><span id="desafioMensagem">-</span></td><td>&nbsp;</td>
	</tr>
	<tr>
		<td>
			<div colspan="2">
				<input type="button" value="valida" onclick="valida()"><input type="button" value="limpar" onclick="limpar()">
				<input type="button" value="novo" onclick="novo()">
			</div>
		</td>	
	</tr>
	<tr>
		<td width="400">
			<applet name="appletTab" code=br.uff.probabilidade.applet.Tabuleiro.class width="600" height="400" >
			</applet>
		</td>
		<td valign="top" height="100%">
			<table cellpadding="10" height="100%" style="color: inherit;">
				<tr style="height:100px;">
					<td valign="top">
						<div id="legenda" ><div>&nbsp;&nbsp;<img src="br/uff/probabilidade/imagens/loading.gif"> Carregando ...</div></div>
					</td>
				</tr>
				<tr>
					<td valign="top">
						<div id="evento" style="visibility: hidden;position: absolute;"><div id="operacaoTxt">Evento <span id="conjOperacao">-</span> = <span id="descOperacao">-</span></div></div>
						<br>
						<div id="montaOperacao" style="visibility: hidden;position: absolute;">		
							<div>
							<table style="color: inherit">
								<tr>
									<td><span id="conjOperacaoProb">-</span> = </td>
									<td><select id="conjsA"></select></td>
									<td>
										<select id="operacoes">
											<option value="^" >intersecao</option>
											<option value="v">uniao</option>
											<option value="-">diferenca</option>
										</select>
									</td>
									<td><select id="conjsB"></select></td>
								</tr>
							</table>
							</div>
						</div>
						<br>
						<div id="probabilidade" style="visibility: hidden;position: absolute;">
						<table id="tabProbabilidade" style="color: inherit">
						</table>
						</div>
					</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td colspan="1"><div id="erroBox" style="width: 100%;text-align: center;" ><span id="msg" style="visibility: hidden;position: absolute;">Nenhuma validacao</span>&nbsp;<a id="proximoPasso" style="visibility: hidden;position: absolute;" href="javascript:proximo()">[ir ao proximo]</a></div></td>
		<td>&nbsp;</td>
	</tr>
	
</table>
</body>
<script>

</script>
</html>
